<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Blurry Menu</title>
    <style type="text/css">
        body {
            background: #1a1a1a url(bg.jpg);
        }
           
               

                    #blur li {
                        border-bottom: 1px solid #000;
                    }
                        #blur a {
                        display: block;
                            position: relative;
                            padding: 20px 25px;
                            margin-left: 10px;
                            text-decoration: none;
                            font-family: "trebuchet ms";
                            font-variant: small-caps;
                            color: transparent;
                            text-shadow: 0 0 2px #cacaca;
                            z-index: 100;
                        }
                /* normal styles */
                    #blur a:hover, #blur a:focus {
                        color: #ffffca;
                        text-shadow: 0 0 0 transparent;
                    }
                /* active styles */
                    #blur .active a, #blur .active a:hover {
                        color: #cacaca;
                        text-shadow: 0 0 2px #cacaca;
                    }
    </style>
    <!--[if IE]>
        <style type="text/css">
            #blur {
                -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0)";
                filter: progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0);
            }
            #blur ul li a {
                color: #ffffca;
                -ms-filter:  "progid:DXImageTransform.Microsoft.Blur()";
                filter:  progid:DXImageTransform.Microsoft.Blur();
            }
            #blur ul a:hover, #blur ul .active a, #blur ul a:focus {
                position: relative;
                margin: 2px 0 -10px 10px;
                -ms-filter:  "progid:DXImageTransform.Microsoft.Blur(enabled = false)";
                filter:  progid:DXImageTransform.Microsoft.Blur(enabled = false);
            }
        </style>
    <![endif]-->
    <!--[if lt IE 8]>
        <style type="text/css">
            #blur ul a:hover, #blur ul .active a {
                position: relative;
                margin: 2px 4px 0 10px;
                filter:  progid:DXImageTransform.Microsoft.Blur(enabled = false);
            }
        </style>
    <![endif]-->



<style>
#main_menu a {
}



#main_menu li {
    border-bottom: 1px solid #000;
}

#main_menu a {
                        display: block;
                            position: relative;
                            padding: 20px 25px;
                            margin-left: 10px;
                            text-decoration: none;
                            font-family: "trebuchet ms";
                            font-variant: small-caps;
                            color: transparent;
                            text-shadow: 0 0 2px #cacaca;
                            z-index: 100;
}
#main_menu a:hover, #main_menu a:focus {
                        color: #ffffca;
                        text-shadow: 0 0 0 transparent;
                    }
                /* active styles */
                    #main_menu .active a, #main_menu .active a:hover {
                        color: #cacaca;
                        text-shadow: 0 0 2px #cacaca;
                    }
</style>

<!--[if IE]>
        <style type="text/css">
            #main_menu {
                -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0)";
                filter: progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0);
            }
            #main_menu ul li a {
                color: #ffffca;
                -ms-filter:  "progid:DXImageTransform.Microsoft.Blur()";
                filter:  progid:DXImageTransform.Microsoft.Blur();
            }
            #main_menu ul a:hover, #main_menu ul .active a, #main_menu ul a:focus {
                position: relative;
                margin: 2px 0 -10px 10px;
                -ms-filter:  "progid:DXImageTransform.Microsoft.Blur(enabled = false)";
                filter:  progid:DXImageTransform.Microsoft.Blur(enabled = false);
            }
        </style>
    <![endif]-->
    <!--[if lt IE 8]>
        <style type="text/css">
            #main_menu ul a:hover, #main_menu ul .active a {
                position: relative;
                margin: 2px 4px 0 10px;
                filter:  progid:DXImageTransform.Microsoft.Blur(enabled = false);
            }
        </style>
    <![endif]-->


</head>

<body>
    <div id="blur">
        <ul>
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">Blog</a>
            </li>
            <li class="active">
                <a href="#">Pet Projects</a>
            </li>
            <li>
                <a href="#">Portfolio</a>
            </li>
            <li>
                <a href="#">Services</a>
            </li>
            <li>
                <a href="#">Contact</a>
            </li>
        </ul>
    </div>
</body>
</html>